<template>
  <div class='container'>
    <el-card>
      <el-row
        type="flex"
        justify="space-between"
      >
        <el-col :span="20">
          <el-form :inline="true">
            <el-form-item label="学科名称">
              <el-input
                style=""
                size="small"
                v-model="search"
                @keyup.enter.native="clickSearch(search)"
                @keyup.esc.native="clearSearch()"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                @click="clearSearch()"
              >清除</el-button>
              <el-button
                size="small"
                type="primary"
                @click="clickSearch(search)"
              >搜索</el-button>
            </el-form-item>
          </el-form>

        </el-col>
        <el-col :span="4">
          <el-row
            type="flex"
            justify="end"
          >
            <el-button
              icon="el-icon-edit"
              type="success"
              size="small"
              @click="subjectBox = true"
            >新增学科</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 提示框 -->
      <el-alert
        :title="`数据一共${this.total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格展示数据区域 -->
      <el-table :data="list">
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          label="学科名称"
          prop="subjectName"
          width="200"
        />
        <el-table-column
          label="创建者"
          prop="username"
          width="200"
        />
        <el-table-column
          label="创建日期"
          min-width="160"
        >
          <template v-slot="{ row }">
            {{row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          label="前台是否显示"
          prop="isFrontDisplay"
        >
          <template v-slot="{ row }">
            {{row.isFrontDisplay === 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column
          label="二级目录"
          prop="twoLevelDirectory"
        />
        <el-table-column
          label="标签"
          prop="tags"
        />
        <el-table-column
          label="题目数量"
          prop="totals"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="240"
        >
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)"
            >学科分类</el-button>
            <el-button
              type="text"
              @click="$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)"
            >学科标签</el-button>
            <el-button
              type="text"
              @click="editSubject(row.id)"
            >修改</el-button>
            <el-button
              type="text"
              @click="delSubject(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="userInfo.page"
        :page-sizes="[5, 10, 15, 30]"
        :page-size="userInfo.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 新增 / 修改 弹出框 -->
    <el-dialog
      @close="subjectCancel"
      :title="subjectTitle"
      :visible.sync="subjectBox"
      width="40%"
    >
      <el-form
        ref="subjectRef"
        label-width="80px"
        :model="subjectForm"
        :rules="subjectFormRules"
      >
        <el-form-item
          label="学科名称"
          prop="subjectName"
        >
          <el-input
            placeholder="请输入学科名称"
            v-model="subjectForm.subjectName"
          />
        </el-form-item>
        <el-form-item
          label="是否显示"
          prop="isFrontDisplay"
        >
          <el-switch
            v-model="subjectForm.isFrontDisplay"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-row
          type="flex"
          justify="end"
        >
          <el-button @click="subjectCancel">取消</el-button>
          <el-button
            type="primary"
            @click="subjectOk"
          >确认</el-button>
        </el-row>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { list, remove, add, detail, update } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      // 头部搜索框
      search: '',
      list: [], // 获取到的学科列表数据
      total: 0, // 数据的总条数
      // 请求体
      userInfo: {
        page: 1,
        pagesize: 10,
        subjectName: null
      },
      subjectBox: false, // 控制新增 / 修改弹出框
      // 弹出框 表单数据
      subjectForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      // 弹出框表单验证规则
      subjectFormRules: {
        subjectName: [{
          required: true, message: '请输入学科名称', trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    subjectTitle () {
      return this.subjectForm.id ? '修改学科' : '新增学科'
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    async getSubjectList () {
      const { data } = await list(this.userInfo)
      this.total = data.counts
      this.list = data.items
    },
    // 页码发生变化触发
    handleCurrentChange (val) {
      this.userInfo.page = val
      this.getSubjectList()
    },
    // 每页显示数量发生变化的时候触发
    handleSizeChange (val) {
      this.userInfo.pagesize = val
      this.getSubjectList()
    },
    // 点击搜索
    clickSearch (val) {
      this.userInfo.subjectName = val
      this.getSubjectList()
    },
    // 点击清空搜索
    clearSearch () {
      this.userInfo.subjectName = null
      this.search = ''
      this.getSubjectList()
    },
    // 点击删除按钮触发
    async delSubject (id) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id })
        this.$message.success('删除学科成功')
        this.getSubjectList()
      } catch (err) {
        err === 'cancel' ? this.$message.info('已取消删除') : console.log(err)
      }
    },
    // 点击弹出框的确认按钮触发
    async subjectOk () {
      await this.$refs.subjectRef.validate()
      if (this.subjectForm.id) {
        // 有id说明回写是修改
        await update(this.subjectForm)
      } else {
        // 没有则是添加
        await add(this.subjectForm)
      }
      this.$message.success(`${this.subjectTitle}成功`)
      this.getSubjectList()
      this.subjectBox = false
    },
    // 点击取消 或者 关闭弹框 触发
    subjectCancel () {
      this.subjectBox = false
      this.subjectForm = {
        subjectName: '',
        isFrontDisplay: 1
      }
      this.$refs.subjectRef.resetFields()
    },
    // 点击修改按钮触发事件
    async editSubject (id) {
      const { data } = await detail({ id })
      this.subjectForm = data
      this.subjectBox = true
    }
  }
}
</script>

<style lang='sass'>
.el-table
  margin-top: 15px
.el-pagination
  margin-top: 20px
  text-align: right
.el-select
  width: auto
.el-pagination__jump
  margin-left: 0
</style>
